<template>
  <view>
    <view class="mch_info">
      <view class="userinfo">
        <image class="avatar" :src="good_info.buy_userImage"></image>
        <view class="right">
          <view class="mch_wx_name">{{good_info.buy_user_nickname}}</view>
        </view>
      </view>
      <view class="order_status">{{statusList[good_info.order_status]}}</view>
    </view>
    <view class="order_detail">
      <view class="order_info">
        <view class="top">
          <view class="image">
              <image class="avatar1" :src="good_info.goods_cover_img"></image>
          </view>
          <view class="order_title"
            >{{good_info.goods_name}}</view
          >
        </view>
        <view class="bottom">
            <view class="flex1">订单号</view>
            <view class="order_no">{{good_info.order_id}}</view>
        </view>
      </view>
      <view class="flex">
          <view class="flex1">单价(折扣)</view>
          <view class="order_no">{{good_info.platform_price}}</view>
      </view>
      <view class="flex">
          <view class="flex1">数量</view>
          <view class="order_no">{{good_info.goods_amt}}</view>
      </view>
      <view class="flex">
          <view class="flex1">订单金额</view>
          <view class="order_no">{{good_info.platform_price*good_info.goods_amt}}</view>
      </view>
      <view class="flex">
        <view class="flex1">应收金额</view>
        <view class="order_no">{{good_info.act_price}}</view>
      </view>
      <view class="flex">
          <view class="flex1">返佣</view>
          <view class="order_no">{{good_info.commission_price}}</view>
      </view>
      <view class="flex">
          <view class="flex1">营收</view>
          <view class="order_no">{{good_info.platform_price*good_info.goods_amt*(1-good_info.commission_rate) | toFixed2}}</view>
      </view>
      <view class="flex">
          <view class="flex1">下单时间</view>
          <view class="order_no">{{good_info.item_create_time | moment}}</view>
      </view>
      <view class="flex">
          <view class="flex1">支付时间</view>
          <view class="order_no">{{good_info.pay_time | moment}}</view>
      </view>
    </view>
  </view>
</template>

<script>
const statusList = {
  0: '待付款',
  1: '待发货',
  2: '已发货',
  3: '交易完成',
  4: '售后',
  4: '交易取消',
};
import {fetchList} from '../../utils/imapi'
export default {
  props: {},
  components: {},
  data() {
    return {
      good_info:{},
      statusList,
    };
  },
  computed: {},
  watch: {},
  onLoad(options) {
    if(options.id) {
      const id =options.id
      this.load_order_detail(id)
      return
    }
    this.load_order_detail()
  },
  onReady() {},
  onShow() {},
  methods: {
   async load_order_detail(id) {
      try {
        const data = await fetchList({
          order_no:id || ''
        })
        if(data.code == 0) {
          this.good_info = data.data[0]
        }
      } catch (error) {

      }
    }
  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
.mch_info {
  height: 192upx;
  width: 100%;
  border-top: 16upx solid #f0eefd;
  border-bottom: 16upx solid #f0eefd;
  padding-left: 32upx;
  padding-right: 32upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .userinfo {
    display: flex;
    align-items: center;
  }
  .avatar {
    width: 112upx;
    height: 112upx;
    border-radius: 50%;
    margin-right: 20upx;
  }
  .right {
    .mch_wx_name {
      margin-bottom: 16upx;
    }
  }
}
.order_status {
  font-size: 36upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #727278;
}
.order_detail {
  width: 100%;
  padding-left: 32upx;
  padding-right: 44upx;
font-size: 28upx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0A0819;

  .order_info {
      border-bottom: 2upx solid #F0EEFD;
      padding: 36upx 0 20upx;
      .top {
          display: flex;
          align-items: center;

      }
  }
}
.image {
      width: 160upx;
    height: 160upx;
    border-radius: 10upx;
    margin-right: 20upx;
}
.avatar1 {
    width: 160upx;
    height: 160upx;
     border-radius: 10upx;
}
.bottom {
    display: flex;
    align-items: center;
    margin-top: 20upx;
}
.flex1 {
       width: 160upx;
       margin-right: 20upx;
}
.flex {
      display: flex;
    align-items: center;
    height: 82upx;
    border-bottom: 2upx solid #F0EEFD;
}
</style>
